<section class="main">
    <form class="form-2">
        <h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
        <p class="float">
            <label for="login"><i class="icon-user"></i>Username</label>
            <input type="text" name="login" placeholder="Username or email">
        </p>
        <p class="float">
            <label for="password"><i class="icon-lock"></i>Password</label>
            <input type="password" name="password" placeholder="Password" class="showpassword">
        </p>
        <p class="clearfix"> 
            <a href="#" class="log-twitter">Log in with Facebook</a>    
            <input type="submit" class="submit-login" name="submit" value="Log in">
        </p>
    </form>
</section>

</div>
<!-- jQuery if needed -->
<script type="text/javascript">
    $(function(){
       
        $(".showpassword").each(function(index,input) {
            var $input = $(input);
            $("<p class='opt'/>").append(
            $("<input type='checkbox' class='showpasswordcheckbox' id='showPassword' />").click(function() {
                var change = $(this).is(":checked") ? "text" : "password";
                var rep = $("<input placeholder='Password' type='" + change + "' />")
                .attr("id", $input.attr("id"))
                .attr("name", $input.attr("name"))
                .attr('class', $input.attr('class'))
                .val($input.val())
                .insertBefore($input);
                $input.remove();
                $input = rep;
            })
        ).append($("<label for='showPassword'/>").text("Show password")).insertAfter($input.parent());
        });

        $('#showPassword').click(function(){
            if($("#showPassword").is(":checked")) {
                $('.icon-lock').addClass('icon-unlock');
                $('.icon-unlock').removeClass('icon-lock');    
            } else {
                $('.icon-unlock').addClass('icon-lock');
                $('.icon-lock').removeClass('icon-unlock');
            }
        });
    });
</script>
           

